﻿/// <reference path="framework.js" />
/// <reference path="framework-UI.js" />
RexToy.registerType('RexToy.UI.Controls.Calendar', RexToy.UI.Controls.InPlacePopup);
RexToy.UI.Controls.Calendar.extend({
    properties: {
        year: 2000,
        month: 1,
        date: 1
    },

    events: ['onselect'],

    $constructor: function () {
        this.setPalette('b');

        var d = new Date();
        this.__year = d.getFullYear();
        this.__month = d.getMonth() + 1;

        this.table = RexToy.UI.Controls.Table.create(7, 7);

        var style = this.table.getDomNode().getStyle();
        style.fontSize = '75%';

        this.initialize(this.table);

        this.refresh();
        this.appendControl(this.table);
    },

    initialize: function (table) {
        var arr = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];

        for (var i = 0; i < 7; i++) {
            var btn = new RexToy.UI.Controls.CalendarButton(arr[i]);
            btn.setPalette('b');
            table.getCell(0, i).appendControl(btn);
        }

        for (var i = 1; i < 7; i++) {
            for (var j = 0; j < 7; j++) {
                var btnDate = new RexToy.UI.Controls.CalendarButton('&nbsp;');
                table.getCell(i, j).appendControl(btnDate);
                btnDate.attachEvent('onclick', this.clickDate.bind(this));
            }
        }

        var c;
        var row = table.insertRow(0);
        var prevYearBtn = new RexToy.UI.Controls.CalendarButton("<");
        c = row.insertCell(0);
        c.appendControl(prevYearBtn);
        this.yearBtn = new RexToy.UI.Controls.CalendarButton(this.__year);
        this.yearBtn.setPalette('d');
        c = row.insertCell(1);
        c.setColSpan(2);
        c.appendControl(this.yearBtn);
        var nextYearBtn = new RexToy.UI.Controls.CalendarButton(">");
        c = row.insertCell(2);
        c.appendControl(nextYearBtn);

        var prevMonthBtn = new RexToy.UI.Controls.CalendarButton("<");
        c = row.insertCell(3);
        c.appendControl(prevMonthBtn);
        this.monthBtn = new RexToy.UI.Controls.CalendarButton(this.__month);
        this.monthBtn.setPalette('d');
        c = row.insertCell(4);
        c.appendControl(this.monthBtn);
        var nextMonthBtn = new RexToy.UI.Controls.CalendarButton(">");
        c = row.insertCell(5);
        c.appendControl(nextMonthBtn);

        prevYearBtn.attachEvent('onclick', this.clickPrevYear.bind(this));
        nextYearBtn.attachEvent('onclick', this.clickNextYear.bind(this));
        prevMonthBtn.attachEvent('onclick', this.clickPrevMonth.bind(this));
        nextMonthBtn.attachEvent('onclick', this.clickNextMonth.bind(this));
    },

    clickNextYear: function () {
        this.__year++;
        this.yearBtn.setText(this.__year);
        this.refresh();
    },

    clickPrevYear: function () {
        this.__year--;
        this.yearBtn.setText(this.__year);
        this.refresh();
    },

    clickNextMonth: function () {
        this.__month++;
        if (this.__month == 13)
            this.__month = 1;
        this.monthBtn.setText(this.__month);
        this.refresh();
    },

    clickPrevMonth: function () {
        this.__month--;
        if (this.__month == 0)
            this.__month = 12;
        this.monthBtn.setText(this.__month);
        this.refresh();
    },

    clickDate: function (sender) {
        this.close();
        this.__date = sender.getText();
        this.__fireEvent('onselect');
    },

    setYear: function (year) {
        this.__year = year;
        this.refresh();
    },

    setMonth: function (month) {
        this.__month = month;
        this.refresh();
    },

    refresh: function () {
        this.yearBtn.setText(this.__year);
        this.monthBtn.setText(this.__month);

        var first = new Date(this.__year, this.__month - 1, 1);
        var prevLast = new Date();
        prevLast.setTime(first.getTime() - 24 * 3600 * 1000);
        var nextFirst = new Date(this.__year, this.__month, 1);
        var length = Math.floor((nextFirst.getTime() - first.getTime()) / 1000 / 24 / 3600);

        var col = first.getDay();
        var row = 2;
        for (var i = 0; i < col; i++) {
            var day = prevLast.getDate() - col + i + 1;
            var btn = this.table.getCell(row, i).getControls()[0];
            btn.setText(day);
            btn.setEnable(false);
        }

        for (var day = 1; day < length + 1; day++) {
            var cell = this.table.getCell(row, col);
            var btn = this.table.getCell(row, col).getControls()[0];
            btn.setText(day);
            btn.setEnable(true);
            col++;
            if (col == 7) {
                col = 0;
                row++;
            }
        }

        for (var day = 1; day < 14; day++) {
            if (row == 8)
                break;
            var btn = this.table.getCell(row, col).getControls()[0];
            btn.setText(day);
            btn.setEnable(false);
            col++;
            if (col == 7) {
                col = 0;
                row++;
            }
        }
    }
});

RexToy.registerType('RexToy.UI.Controls.CalendarButton', RexToy.UI.Controls.Button);
RexToy.UI.Controls.CalendarButton.extend({
    properties: {
        dragEventBubble: false
    },

    $constructor: function (text) {
        this.__domNode.getStyle().margin = 0;
        this.setStandalone(false);
        this.setPalette('c');
    }
});

RexToy.registerType('RexToy.UI.Controls.CheckBox', RexToy.UI.Controls.Control);
RexToy.UI.Controls.CheckBox.extend({
    properties: {
        checked: false,
        enable: true,
        standalone: true,
        value: 0
    },

    events: ['onchange'],

    $constructor: function (text, value, activeOnCheck) {
        this.__value = value;
        this._activeOnCheck = !!activeOnCheck;
        this.__domNode = RexToy.UI.Controls.DomNode.create({
            tag: 'div',
            className: 'ui-checkbox',
            items: [
                {
                    tag: 'input',
                    type: 'checkbox'
                },
                {
                    tag: 'label',
                    $name: 'lbl',
                    className: 'ui-btn ui-btn-icon-left ui-corner-all ui-btn-up-c',
                    items: [
                        {
                            tag: 'span',
                            $name: 'spn',
                            className: 'ui-btn-inner ui-corner-all',
                            items: [
                                {
                                    tag: 'span',
                                    className: 'ui-btn-text',
                                    innerHTML: text
                                },
                                {
                                    tag: 'span',
                                    $name: 'check',
                                    className: 'ui-icon ui-icon-checkbox-off'
                                }
                            ]
                        }
                    ]
                }
            ]
        });
        this.__domNode.attachEvent('onclick', this._onclick.bind(this))
            .attachEvent('ondblclick', this._onclick.bind(this))
            .attachEvent('onmouseover', this.onmouseover.bind(this))
            .attachEvent('onmouseout', this.onmouseout.bind(this));
    },

    onmouseover: function () {
        if (this.__enable === true) {
            var l = this.__domNode.$('lbl');
            l.replaceClass('ui-btn-up-c', 'ui-btn-hover-c');
        }
    },

    onmouseout: function () {
        if (this.__enable === true) {
            var l = this.__domNode.$('lbl');
            l.replaceClass('ui-btn-hover-c', 'ui-btn-up-c');
        }
    },

    _onclick: function () {
        if (this.__enable === true) {
            this.setChecked(!this.__checked);

            this.__fireEvent('onchange');
        }
    },

    setChecked: function (checked) {
        this.__checked = checked;
        var l = this.__domNode.$('lbl');
        var c = this.__domNode.$('check');
        if (this.__checked === true) {
            if (this._activeOnCheck)
                l.appendClass('ui-btn-active');
            c.replaceClass('ui-icon-checkbox-off', 'ui-icon-checkbox-on');
        }
        if (this.__checked === false) {
            if (this._activeOnCheck)
                l.removeClass('ui-btn-active');
            c.replaceClass('ui-icon-checkbox-on', 'ui-icon-checkbox-off');
        }
    },

    setEnable: function (enable) {
        if (enable === true) {
            this.__domNode.removeClass('ui-disabled');
        }
        if (enable === false) {
            this.__domNode.appendClass('ui-disabled');
        }

        this.__enable = enable;
    },

    setStandalone: function (standalone) {
        var spn = this.__domNode.$('spn');
        var lbl = this.__domNode.$('lbl');
        if (standalone === true) {
            spn.appendClass('ui-corner-all');
            lbl.appendClass('ui-corner-all');
        }
        if (standalone === false) {
            spn.removeClass('ui-corner-all');
            lbl.removeClass('ui-corner-all');
        }
    },

    setFirst: function (first) {
        var spn = this.__domNode.$('spn');
        var lbl = this.__domNode.$('lbl');
        if (first === true) {
            spn.appendClass('ui-corner-top');
            lbl.appendClass('ui-corner-top');
        }
        if (first === false) {
            spn.removeClass('ui-corner-top');
            lbl.removeClass('ui-corner-top');
        }
    },

    setLast: function (last) {
        var spn = this.__domNode.$('spn');
        var lbl = this.__domNode.$('lbl');
        if (last === true) {
            spn.appendClass('ui-corner-bottom');
            lbl.appendClass('ui-corner-bottom');
        }
        if (last === false) {
            spn.removeClass('ui-corner-bottom');
            lbl.removeClass('ui-corner-bottom');
        }
    }
});

RexToy.registerType('RexToy.UI.Controls.RadioButton', RexToy.UI.Controls.Control);
RexToy.UI.Controls.RadioButton.extend({
    properties: {
        enable: true,
        checked: false,
        value: 0
    },

    events: ['onchange'],

    $constructor: function (text, value, activeOnCheck) {
        this.__value = value;
        this._activeOnCheck = !!activeOnCheck;
        this.__domNode = RexToy.UI.Controls.DomNode.create({
            tag: 'div',
            className: 'ui-radio',
            items: [
                {
                    tag: 'input',
                    type: 'radio',
                    value: value
                },
                {
                    tag: 'label',
                    $name: 'lbl',
                    className: 'ui-btn ui-btn-icon-left ui-btn-up-c',
                    items: [{
                        tag: 'span',
                        $name: 'spn',
                        className: 'ui-btn-inner',
                        items: [
                            {
                                tag: 'span',
                                className: 'ui-btn-text',
                                innerHTML: text
                            },
                            {
                                tag: 'span',
                                $name: 'check',
                                className: 'ui-icon ui-icon-radio-off'
                            }
                        ]
                    }]
                }
            ]
        });
        this.__domNode.attachEvent('onclick', this._onclick.bind(this))
            .attachEvent('ondblclick', this._onclick.bind(this))
            .attachEvent('onmouseover', this.onmouseover.bind(this))
            .attachEvent('onmouseout', this.onmouseout.bind(this));
    },

    onmouseover: function () {
        if (this.__enable === true) {
            var l = this.__domNode.$('lbl');
            l.replaceClass('ui-btn-up-c', 'ui-btn-hover-c');
        }
    },

    onmouseout: function () {
        if (this.__enable === true) {
            var l = this.__domNode.$('lbl');
            l.replaceClass('ui-btn-hover-c', 'ui-btn-up-c');
        }
    },

    _onclick: function () {
        if (this.__enable === true) {
            this.setChecked(true);
            this.__fireEvent('onchange');
        }
    },

    setChecked: function (checked) {
        this.__checked = checked;
        var l = this.__domNode.$('lbl');
        var c = this.__domNode.$('check');
        if (this.__checked === true) {
            if (this._activeOnCheck)
                l.appendClass('ui-btn-active');
            c.replaceClass('ui-icon-radio-off', 'ui-icon-radio-on');
        }
        if (this.__checked === false) {
            if (this._activeOnCheck)
                l.removeClass('ui-btn-active');
            c.replaceClass('ui-icon-radio-on', 'ui-icon-radio-off');
        }
    },

    setEnable: function (enable) {
        if (enable === true) {
            this.__domNode.removeClass('ui-disabled');
        }
        if (enable === false) {
            this.__domNode.appendClass('ui-disabled');
        }

        this.__enable = enable;
    },

    setStandalone: function (standalone) {
        var spn = this.__domNode.$('spn');
        var lbl = this.__domNode.$('lbl');
        if (standalone === true) {
            spn.appendClass('ui-corner-all');
            lbl.appendClass('ui-corner-all');
        }
        if (standalone === false) {
            spn.removeClass('ui-corner-all');
            lbl.removeClass('ui-corner-all');
        }
    },

    setFirst: function (first) {
        var spn = this.__domNode.$('spn');
        var lbl = this.__domNode.$('lbl');
        if (first === true) {
            spn.appendClass('ui-corner-top');
            lbl.appendClass('ui-corner-top');
        }
        if (first === false) {
            spn.removeClass('ui-corner-top');
            lbl.removeClass('ui-corner-top');
        }
    },

    setLast: function (last) {
        var spn = this.__domNode.$('spn');
        var lbl = this.__domNode.$('lbl');
        if (last === true) {
            spn.appendClass('ui-corner-bottom');
            lbl.appendClass('ui-corner-bottom');
        }
        if (last === false) {
            spn.removeClass('ui-corner-bottom');
            lbl.removeClass('ui-corner-bottom');
        }
    }
});

RexToy.registerType('RexToy.UI.Controls.ChoiceGroup', RexToy.UI.Controls.Container);
RexToy.UI.Controls.ChoiceGroup.extend({
    multi: true,

    events: ['onchange'],

    $constructor: function (allowMulti) {
        this.multi = !!allowMulti;
    },

    appendControl: function (ctrl) {
        ctrl.setStandalone(false);
        if (this.__controls.length == 0) {
            ctrl.setFirst(true);
        }

        var lastCtrl = this.__controls.last();
        if (lastCtrl != null) {
            lastCtrl.setLast(false);
        }

        this.$super(ctrl);
        ctrl.setLast(true);
    },

    removeControl: function (ctrl) {
        this.$super(ctrl);

        var firstCtrl = this.__controls.first();
        if (firstCtrl != null) {
            firstCtrl.setFirst(true);
        }

        var lastCtrl = this.__controls.last();
        if (lastCtrl != null) {
            lastCtrl.setLast(true);
        }
    },

    appendChoice: function (text, value) {//Note:virtual here, override in derive class.
    },

    removeChoice: function (value) {//Note:virtual here, override in derive class.
    },

    clearChoice: function () {//Note:virtual here, override in derive class.
    },

    getControl: function (index) {
        return this.__controls[index];
    },

    getSelectedIndex: function () {
        if (this.multi)
            throw new RexToy.InvalidOperationException('MultiChoiceGroup, use getSelectedIndexes()');
        for (var i = 0; i < this.__controls.length; i++) {
            if (this.__controls[i].getChecked()) {
                return i;
            }
        }
    },

    getSelectedIndexes: function () {
        if (!this.multi)
            throw new RexToy.InvalidOperationException('MultiChoiceGroup, use getSelectedIndex()');
        var ret = [];
        for (var i = 0; i < this.__controls.length; i++) {
            if (this.__controls[i].getChecked()) {
                ret.push(i);
            }
        }
        return ret;
    },

    getSelectedValue: function () {
        if (this.multi)
            throw new RexToy.InvalidOperationException('MultiChoiceGroup, use getSelectedValues()');
        for (var i = 0; i < this.__controls.length; i++) {
            var ctrl = this.__controls[i];
            if (ctrl.getChecked())
                return ctrl.getValue();
        }
    },

    getSelectedValues: function () {
        if (!this.multi)
            throw new RexToy.InvalidOperationException('MultiChoiceGroup, use getSelectedValue()');
        var ret = [];
        for (var i = 0; i < this.__controls.length; i++) {
            var ctrl = this.__controls[i];
            if (ctrl.getChecked())
                ret.push(ctrl.getValue());
        }
        return ret;
    },

    setSelectedValue: function (v) {
        if (this.multi)
            throw new RexToy.InvalidOperationException('MultiChoiceGroup, use setSelectedValues()');
        for (var i = 0; i < this.__controls.length; i++) {
            var ctrl = this.__controls[i];
            if (v == ctrl.getValue())
                ctrl.setChecked(true);
            else
                ctrl.setChecked(false);
        }
    },

    setSelectedValues: function (arr) {
        if (!this.multi)
            throw new RexToy.InvalidOperationException('MultiChoiceGroup, use setSelectedValue()');
        for (var i = 0; i < this.__controls.length; i++) {
            var ctrl = this.__controls[i];
            if (arr.contains(ctrl.getValue()))
                ctrl.setChecked(true);
            else
                ctrl.setChecked(false);
        }
    },

    setEnable: function(enable){
        for (var i = 0; i < this.__controls.length; i++) {
            this.__controls[i].setEnable(enable);
        }
    }
});

RexToy.registerType('RexToy.UI.Controls.VChoiceGroup', RexToy.UI.Controls.ChoiceGroup);
RexToy.UI.Controls.VChoiceGroup.extend({
    $constructor: function (allowMulti) {
        this.__domNode = RexToy.UI.Controls.DomNode.create({
            tag: 'div',
            $name: 'container',
            className: 'ui-controlgroup-vertical'
        })
    },

    appendChoice: function (text, value, activeOnCheck) {
        var ctrl = null;
        if (this.multi) {
            ctrl = new RexToy.UI.Controls.CheckBox(text, value, activeOnCheck);
        } else {
            ctrl = new RexToy.UI.Controls.RadioButton(text, value, activeOnCheck);
        }

        ctrl.attachEvent('onchange', this._onchange.bind(this, ctrl));
        this.appendControl(ctrl);
    },

    removeChoice: function (value) {
        for (var i = 0; i < this.__controls.length; i++) {
            var ctrl = this.__controls[i];
            if (ctrl.getValue() == value) {
                this.removeControl(ctrl);
                break;
            }
        }
    },

    clearChoice: function () {
        this.clearControls();
    },

    _onchange: function (sender) {
        if (!this.multi) {
            this.__controls.forEach(function (rb, idx) {
                if (rb != sender) {
                    rb.setChecked(false);
                }
            });
        }
        this.__fireEvent('onchange');
    }
});

RexToy.registerType('RexToy.UI.Controls.ChoiceButton', RexToy.UI.Controls.Control);
RexToy.UI.Controls.ChoiceButton.extend({
    properties: {
        value: 0,
        checked: false,
        enable: true
    },

    events: ['onchange'],

    $constructor: function (text, value) {
        this.__value = value;
        this.__orientation = RexToy.UI.Controls.Orientation.Horizental;
    },

    setButtonClass: function (status) {
        if (this.__enable === true) {
            var dom = this.__domNode.$('lbl');
            RexToy.UI.Controls.ButtonStyleUtil.setButtonClass(dom, status, 'c');
        }
    },

    onmouseover: function () {
        this.setButtonClass('hover');
    },

    onmousedown: function () {
        this.setButtonClass('down');
    },

    onmouseup: function () {
        this.setButtonClass('up');
    },

    setEnable: function (enable) {
        if (enable === true) {
            this.__domNode.removeClass('ui-disabled');
        }
        if (enable === false) {
            this.__domNode.appendClass('ui-disabled');
        }

        this.__enable = enable;
    },

    setFirst: function (first) {
        var spn = this.__domNode.$('spn');
        var lbl = this.__domNode.$('lbl');
        if (first === true) {
            spn.appendClass('ui-corner-left');
            lbl.appendClass('ui-corner-left');
        }
        if (first === false) {
            spn.removeClass('ui-corner-left');
            lbl.removeClass('ui-corner-left');
        }
    },

    setLast: function (last) {
        var spn = this.__domNode.$('spn');
        var lbl = this.__domNode.$('lbl');
        if (last === true) {
            spn.appendClass('ui-corner-right');
            lbl.appendClass('ui-corner-right');
        }
        if (last === false) {
            spn.removeClass('ui-corner-right');
            lbl.removeClass('ui-corner-right');
        }
    }
});

RexToy.registerType('RexToy.UI.Controls.SingleChoiceButton', RexToy.UI.Controls.ChoiceButton);
RexToy.UI.Controls.SingleChoiceButton.extend({
    $constructor: function (text, value) {
        this.__domNode = RexToy.UI.Controls.DomNode.create({
            tag: 'div',
            className: 'ui-radio',
            items: [
                {
                    tag: 'input',
                    type: 'radio',
                    value: value
                },
                {
                    tag: 'label',
                    $name: 'lbl',
                    className: 'ui-btn ui-btn-up-c',
                    items: [{
                        tag: 'span',
                        className: 'ui-btn-inner',
                        $name: 'spn',
                        items: [{
                            tag: 'span',
                            className: 'ui-btn-text',
                            innerHTML: text
                        }]
                    }]
                }
            ]
        });
        this.__domNode.attachEvent('onclick', this._onclick.bind(this))
            .attachEvent('ondblclick', this._onclick.bind(this));

        this.__domNode.attachEvent('onmouseover', this.onmouseover.bind(this))
            .attachEvent('onmouseout', this.onmouseup.bind(this))
            .attachEvent('onmousedown', this.onmousedown.bind(this))
            .attachEvent('onmouseup', this.onmouseup.bind(this));
    },

    _onclick: function () {
        if (this.__enable) {
            this.setChecked(true);
            this.__fireEvent('onchange');
        }
    },

    setChecked: function (checked) {
        this.__checked = checked;
        var dom = this.__domNode.$('lbl');
        if (checked === true)
            dom.appendClass('ui-btn-active');
        if (checked === false)
            dom.removeClass('ui-btn-active');
    }
});

RexToy.registerType('RexToy.UI.Controls.MultipleChoiceButton', RexToy.UI.Controls.ChoiceButton);
RexToy.UI.Controls.MultipleChoiceButton.extend({
    $constructor: function (text, value) {
        this.__domNode = RexToy.UI.Controls.DomNode.create({
            tag: 'div',
            className: 'ui-checkbox',
            items: [
                {
                    tag: 'input',
                    type: 'checkbox',
                    className: 'custom'
                },
                {
                    tag: 'label',
                    $name: 'lbl',
                    className: 'ui-btn ui-btn-up-c',
                    items: [{
                        tag: 'span',
                        className: 'ui-btn-inner',
                        $name: 'spn',
                        items: [{
                            tag: 'span',
                            className: 'ui-btn-text',
                            innerHTML: text
                        }]
                    }]
                }
            ]
        });
        this.__domNode.attachEvent('onclick', this._onclick.bind(this))
            .attachEvent('ondblclick', this._onclick.bind(this));

        this.__domNode.attachEvent('onmouseover', this.onmouseover.bind(this))
            .attachEvent('onmouseout', this.onmouseup.bind(this))
            .attachEvent('onmousedown', this.onmousedown.bind(this))
            .attachEvent('onmouseup', this.onmouseup.bind(this));
    },

    _onclick: function () {
        if (this.__enable) {
            this.setChecked(!this.__checked);
            this.__fireEvent('onchange');
        }
    },

    setChecked: function (checked) {
        this.__checked = checked;
        var dom = this.__domNode.$('lbl');
        if (checked === true)
            dom.appendClass('ui-btn-active');
        if (checked === false)
            dom.removeClass('ui-btn-active');
    }
});

RexToy.registerType('RexToy.UI.Controls.HChoiceGroup', RexToy.UI.Controls.ChoiceGroup);
RexToy.UI.Controls.HChoiceGroup.extend({
    $constructor: function (allowMulti) {
        this.__domNode = RexToy.UI.Controls.DomNode.create({
            tag: 'div',
            $name: 'container',
            className: 'ui-corner-all ui-controlgroup ui-controlgroup-horizontal'
        });
    },

    appendChoice: function (text, value) {
        var ctrl = null;
        if (this.multi) {
            ctrl = new RexToy.UI.Controls.MultipleChoiceButton(text, value);
        } else {
            ctrl = new RexToy.UI.Controls.SingleChoiceButton(text, value);
        }

        ctrl.attachEvent('onchange', this._onchange.bind(this, ctrl));
        this.appendControl(ctrl);
    },

    removeChoice: function (value) {
        for (var i = 0; i < this.__controls.length; i++) {
            var ctrl = this.__controls[i];
            if (ctrl.getValue() == value) {
                this.removeControl(ctrl);
                break;
            }
        }
    },

    clearChoice: function () {
        this.clearControls();
    },

    _onchange: function (sender) {
        if (!this.multi) {
            this.__controls.forEach(function (rb, idx) {
                if (rb != sender) {
                    rb.setChecked(false);
                }
            });
        }
        this.__fireEvent('onchange');
    }
});

RexToy.registerType('RexToy.UI.Controls.DropDownList', RexToy.UI.Controls.Control);
RexToy.UI.Controls.DropDownList.extend({
    events: ['onchange'],

    $constructor: function (defaultText) {
        this.__palette = 'c';
        this.__domNode = RexToy.UI.Controls.DomNode.create({
            tag: 'div',
            className: 'ui-select',
            items: [{
                tag: 'div',
                $name: 'btn',
                className: 'ui-btn ui-btn-icon-right ui-btn-corner-all ui-shadow ui-btn-up-c',
                items: [
                    {
                        tag: 'span',
                        $name: 'spn',
                        className: 'ui-btn-inner ui-btn-corner-all',
                        items: [
                            {
                                tag: 'span',
                                className: 'ui-btn-text',
                                $name: 'text',
                                innerHTML: defaultText || ''
                            },
                            {
                                tag: 'span',
                                className: 'ui-icon ui-icon-arrow-d ui-icon-shadow'
                            }
                        ]
                    },
                    {
                        tag: 'select',
                        $name: 'selector'
                    }
                ]
            }]
        });

        var domSel = this.__domNode.$('selector');
        domSel.attachEvent('onchange', this._onchange.bind(this));
        var domBtn = this.__domNode.$('btn');
        domBtn.attachEvent('onmouseout', this.mouseout.bind(this))
              .attachEvent('onmouseover', this.mouseover.bind(this));
    },

    setPalette: function (val) {
        var template = 'ui-btn-up-{0}';
        var dom = this.__domNode.$('btn');
        dom.replaceClass(String.format(template, this.__palette), String.format(template, val));
        this.__palette = val;
    },

    mouseout: function () {
        var domBtn = this.__domNode.$('btn');
        domBtn.replaceClass(String.format('ui-btn-hover-{0}', this.__palette), String.format('ui-btn-up-{0}', this.__palette));
    },

    mouseover: function () {
        var domBtn = this.__domNode.$('btn');
        domBtn.replaceClass(String.format('ui-btn-up-{0}', this.__palette), String.format('ui-btn-hover-{0}', this.__palette));
    },

    appendChoice: function (text, value) {
        var dom = this.__domNode.$('selector');
        var option = RexToy.UI.Controls.DomNode.create({
            tag: 'option',
            value: value || text,
            innerHTML: text
        });
        dom.appendChild(option);
    },

    removeChoice: function (value) {
        var dom = this.__domNode.$('selector');
        var arr = dom.getChildren();
        for (var i = 0; i < arr.length; i++) {
            if (arr[i]._element.value == value) {
                dom.removeChild(arr[i]);
                break;
            }
        }
    },

    clearChoice: function () {
        var dom = this.__domNode.$('selector');
        dom.clearChildren();
    },

    _onchange: function () {
        var sel = this.__domNode.$('selector');
        var op = sel._element.options[sel._element.selectedIndex];
        var txt = this.__domNode.$('text');
        txt._element.innerHTML = op.text;

        this.__fireEvent('onchange');
    },

    getSelectedValue: function () {
        var sel = this.__domNode.$('selector');
        var op = sel._element.options[sel._element.selectedIndex];
        return op.value;
    },

    setSelectedValue: function (val) {
        var sel = this.__domNode.$('selector');
        var ops = sel._element.options;
        for (var i = 0; i < ops.length; i++) {
            if (ops[i].value == val) {
                sel.selectedIndex = i;
                var txt = this.__domNode.$('text');
                txt._element.innerHTML = ops[i].text;
                this.__fireEvent('onchange');
                break;
            }
        }
    },

    setStandalone: function (standalone) {
        var btn = this.__domNode.$('btn');
        var spn = this.__domNode.$('spn');
        if (standalone === true) {
            btn.appendClass('ui-btn-corner-all');
            btn.appendClass('ui-shadow');
            spn.appendClass('ui-btn-corner-all');
        }
        if (standalone === false) {
            btn.removeClass('ui-btn-corner-all');
            btn.removeClass('ui-shadow');
            spn.removeClass('ui-btn-corner-all');
        }
    }
});

RexToy.registerType('RexToy.UI.Controls.ListView', RexToy.UI.Controls.Container);
RexToy.UI.Controls.ListView.extend({
    properties: {
        clickedItem: null,
        sizeUpdate: false
    },

    events: ['onitemclick'],

    $constructor: function () {
        this.__domNode = RexToy.UI.Controls.DomNode.create({
            tag: 'ul',
            $name: 'container',
            className: 'ui-listview ui-listview-inset ui-corner-all ui-shadow'
        });
    },

    _clickItem: function (clickedItem) {
        this.__clickedItem = clickedItem;
        this.__fireEvent('onitemclick');
    },

    setClickedItem: function (val) {
        throw new RexToy.ReadOnlyPropertyException('clicked item');
    },

    appendItem: function (listItem) {
        //Refactor:How to attach event? more list item subtype coming... think it after we implement 'interface' in codebase
        if (listItem instanceof RexToy.UI.Controls.ListItem) {
            listItem.attachEvent('onclick', this._clickItem.bind(this, listItem));
        }

        this.appendControl(listItem);
        this._adjustCorner();
    },

    removeItem: function (listItem) {
        this.removeControl(listItem);
        this._adjustCorner();
    },

    insertItemAt: function (listItem, index) {
        if (listItem instanceof RexToy.UI.Controls.ListItem) {
            listItem.attachEvent('onclick', this._clickItem.bind(this, listItem));
        }

        this.insertControlAt(listItem, index);
        this._adjustCorner();
    },

    _adjustCorner: function () {
        if (this.__controls.length == 0) return;

        for (var i = 0; i < this.__controls.length; i++) {
            var dom = this.__controls[i].getDomNode();
            dom.removeClass('ui-corner-top');
            dom.removeClass('ui-corner-bottom');
        }

        var first = this.__controls[0].getDomNode();
        first.appendClass('ui-corner-top');
        var last = this.__controls[this.__controls.length - 1].getDomNode();
        last.appendClass('ui-corner-bottom');
    },

    clearItems: function () {
        this.clearControls();
    }
});

RexToy.registerType('RexToy.UI.Controls.ListDevider', RexToy.UI.Controls.Control);
RexToy.UI.Controls.ListDevider.extend({
    properties: {
        text: String.Empty,
        enable: true
    },

    $constructor: function (content) {
        this.__palette = 'b';
        this.__text = content;
        this.__domNode = RexToy.UI.Controls.DomNode.create({
            tag: 'li',
            $name: 'content',
            className: 'ui-li ui-li-divider ui-btn ui-btn-up-b',
            innerHTML: this.__text
        });
        this.setPalette(this.__palette);
    },

    setPalette: function (val) {
        var template = 'ui-bar-{0}';
        this.__domNode.removeClass(String.format(template, this.__palette), String.format(template, val));
        this.__palette = val;
    },

    setText: function (val) {
        this.__text = val;
        var dom = this.__domNode.$('content');
        dom._element.innerHTML = val;
    }
});

RexToy.registerType('RexToy.UI.Controls.ListItem', RexToy.UI.Controls.Control);
RexToy.UI.Controls.ListItem.extend({
    properties: {
        text: String.Empty,
        parent: null,
        enable: true,
        instance: null,
        icon: 'ui-icon-arrow-r',
        showCount: false,
        count: 0
    },

    events: ['onclick'],

    $constructor: function (content, instance) {
        this.__palette = 'c';
        this.__instance = instance;
        this.__text = content;
        this.__domNode = RexToy.UI.Controls.DomNode.create({
            tag: 'li',
            className: 'ui-btn ui-btn-icon-right ui-li',
            items: [{
                tag: 'div',
                className: 'ui-btn-inner ui-li',
                items: [{
                    tag: 'div',
                    className: 'ui-btn-text',
                    items: [{
                        tag: 'a',
                        $name: 'content',
                        className: 'ui-link-inherit',
                        innerHTML: this.__text,
                        items: [
                            {
                                tag: 'img',
                                $name: 'img',
                                className: 'ui-li-icon ui-li-thumb'
                            },
                            {
                                tag: 'span',
                                $name: 'count',
                                className: 'ui-li-count ui-btn-up-c ui-btn-corner-all',
                                innerHTML: this.__count
                            }
                        ]
                    }]
                },
                {
                    tag: 'span',
                    $name: 'icon',
                    className: 'ui-icon ui-icon-arrow-r'
                }]
            }]
        });
        this.__domNode.attachEvent('onmouseout', this.mousenormal.bind(this))
            .attachEvent('onmousedown', this.mousedown.bind(this))
            .attachEvent('onmouseover', this.mouseover.bind(this))
            .attachEvent('onmouseup', this.mousenormal.bind(this))
            .attachEvent('onclick', this._onclick.bind(this));
        this.setItemClass('up');

        this.setShowCount(false);
        this.setShowImg(false);
    },

    setIcon: function (icon) {
        var dom = this.__domNode.$('icon');
        dom.replaceClass(this.__icon, icon);
        this.__icon = icon;
    },

    setShowImg: function (val) {
        var dom = this.__domNode.$('img');
        if (val === true) {
            this.__domNode.appendClass('ui-li-has-icon');
            dom.getStyle().display = 'block';
        }
        if (val === false) {
            this.__domNode.removeClass('ui-li-has-icon');
            dom.getStyle().display = 'none';
        }
    },

    setImgSrc: function (src) {
        var dom = this.__domNode.$('img');
        dom.setAttribute('src', src);
    },

    setShowCount: function (val) {
        var countDom = this.__domNode.$('count');
        countDom.getStyle().display = (val ? 'block' : 'none');
    },

    setCount: function (val) {
        var countDom = this.__domNode.$('count');
        this.__count = val;
        countDom._element.innerHTML = val;
    },

    setText: function (val) {
        this.__text = val;
        var dom = this.__domNode.$('content');
        dom._element.innerHTML = val;
    },

    setItemClass: function (status) {
        var s = {
            up: String.format('ui-btn-up-{0}', this.__palette),
            down: String.format('ui-btn-down-{0}', this.__palette),
            hover: String.format('ui-btn-hover-{0}', this.__palette)
        };

        if (this.__enable === true) {
            for (var p in s) {
                if (p == status) {
                    this.__domNode.appendClass(s[p]);
                } else {
                    this.__domNode.removeClass(s[p]);
                }
            }
        }
    },

    mousenormal: function () {
        this.setItemClass('up');
    },

    mousedown: function () {
        this.setItemClass('down');
    },

    mouseover: function () {
        this.setItemClass('hover');
    },

    setEnable: function (enable) {
        if (enable === true) {
            this.setItemClass('up');
        }
        if (enable === false) {
            this.setItemClass('up');
            this.__domNode.appendClass('ui-disabled');
        }

        this.__enable = enable;
    },

    setPalette: function (palette) {
        this.setItemClass('none');
        this.__palette = palette;
        this.setItemClass('up');
    },

    _onclick: function () {
        this.__fireEvent('onclick');
    }
});